<template>
  <z-paging :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`" :empty-view-text="`暂无订单`"
			:show-empty-view-reload-when-error="false" ref="paging" v-model="list" @query="queryList" :fixed="true"
			width="100%" height="100%">
     
  <view class="w-[100%] relative">
    <image src="@/static/images/img/bg.png" class="w-[100%] absolute top-0 h-[892rpx] z-[-1]" />
    <view :style="{ paddingTop: menuButtonInfoBottom + 'px' }" class="px-[32rpx]">
      <view class="relative ">
        <image src="@/static/images/img/矩形.png" class="w-[100%] h-[208rpx] absolute top-0" />
        <view class="px-[30rpx] py-[36rpx] relative w-[100%]  ">
          <image  style="width: 385rpx;height: 34rpx;" src="/static/images/img/sc_top_text_1.png" />
          <view class="mt-[14rpx] text-[20rpx] text-[#fff] z-[10]">
            <text class="z-[10] text-[20rpx] ">可上门看车 精准实时 抖音微信快手等全媒体高质量用户</text>
          </view>
          <view class="mt-[24rpx] z-[10] w-[100%] h-[120rpx] bg flex flex-col items-center  pt-[18rpx]">
            <view class="text-[24rpx] mb-[10rpx] text-[#fff] font-[500]">截止今日车主收车成功的有</view>
            <view class="w-[288rpx] flex justify-between items-center">
              <view v-for="item in number_val" class="w-[32rpx] relative">
                <view class="w-[100%] h-[17rpx] bg-[#fff] rounded-[4rpx]">

                </view>
                <view class="w-[100%] mt-[2rpx] h-[17rpx] bg-[#fff] rounded-[4rpx]">

                </view>
                <view
                  class="text-[#FFB514] text-[28rpx] h-[34rpx] w-[100%] flex justify-center items-center absolute top-0 font-[500]">
                 {{ item }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class=" w-[100%] flex items-center bg-[#fff] p-[8rpx] rounded-[12rpx]">
        <image src="@/static/images/icon/sc_lb.png" class="w-[41rpx] h-[43rpx] mr-[8rpx]" />
        <text class="text-[#C49906] text-[24rpx]">四川省成都市 陈先生 购买全媒体意向线索包 3分钟前</text>
      </view>
      <view class="w-[100%] flex mt-[18rpx] justify-end items-center">
        <view class="bg-[#fff] p-[16rpx] flex rounded-[8rpx] items-center">
          <image src="@/static/images/icon/map.png" class="w-[40rpx] h-[40rpx]" />
          <text class="mx-[4rpx] text-[#000] text-[24rpx]">城市</text>
          <image src="@/static/images/icon/bottom.png" class="w-[28rpx] h-[28rpx]" />
        </view>
        <view class="bg-[#fff] p-[16rpx] flex ml-[8rpx] rounded-[8rpx] items-center">
          <image src="@/static/images/icon/time.png" class="w-[40rpx] h-[40rpx]" />
          <text class="mx-[4rpx] text-[#000] text-[24rpx]">上牌时间</text>
          <image src="@/static/images/icon/bottom.png" class="w-[28rpx] h-[28rpx]" />
        </view>
      </view>
    </view>
    <!-- <up-sticky :offsetTop="menuButtonInfoBottom + 'px'" bgColor="#F7F7F7"> -->
      <up-tabs :list="tabs" :scrollable="false" :activeStyle="{
        color: '#000',
        fontWeight: '600',
        fontSize: '28rpx',
      }" :inactiveStyle="{
        color: '#000000',
        fontSize: '28rpx'
      }" lineWidth="36rpx" lineHeight="8rpx" lineColor="linear-gradient( 98deg, #FFF1B8 0%, #FFD856 100%)"></up-tabs>
    <!-- </up-sticky> -->
    <view class="px-[32rpx] pt-[32rpx] w-[100%]">
      <sc-card v-for="item in list" :key="item + 'sc-card'"  class="mb-[24rpx]"/>
    </view>
  </view>
    <!-- <view class="qerq">

  </view> -->
  <template #bottom>

    <tabBar />
  </template>
</z-paging>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
// 筛选
const tabs = ref([{ name: '二手车源' }, { name: '报废车源' }, { name: '大货车源' }, { name: '求购车源' }])
const menuButtonInfoBottom = ref(90) // 胶囊按钮信息
// 分页数据
const list = ref([]);
const paging = ref(null);
const queryList = async (pageNum, pageSize) => {
	try {
		const from = {
			pageNum: pageNum,
			pageSize: pageSize,
		};
		// const { rows } = await listWorker(from);
		paging.value.complete([1,2,3,4,5,6,7]);
	} catch (e) {
		console.log('报错=>', e);
		//TODO handle the exception
		paging.value.complete(false);
	}
};
const number_val = ref([1,2,3,4,5,6,7,8,9])

onLoad(() => {
  menuButtonInfoBottom.value = uni.getMenuButtonBoundingClientRect().bottom || 90;
}) 

</script>

<style lang="scss" scoped>
.bg {
  background: rgba(255, 255, 255, 0.37);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-radius: 32rpx 32rpx 12rpx 12rpx;
  border: 2rpx solid #FFFFFF;
  color: rgb(255, 255, 255);
}
.qerq{
  width: 108rpx;
height: 108rpx;
background: linear-gradient( 98deg, #FFF8DD 0%, #FFD856 100%);
border-radius: 50%;

}
</style>